﻿@page "/tests/elements";
<Row>
    <Column ColumnSize="ColumnSize.Is12">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Tooltip</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Display a tooltip attached to any kind of element with different positioning.</CardText>
            </CardBody>
            <CardBody>
                <Row>
                    <Column ColumnSize="ColumnSize.Is6">
                        <Tooltip Text="Hello tooltip">
                            <Button Color="Color.Primary">Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Tooltip with a long Text. So we use Multiline modifier to force multiline display." Multiline="true">
                            <Button Color="Color.Primary">Multiline Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Hello faded tooltip" Fade="true">
                            <Button Color="Color.Primary">Fade Tooltip</Button>
                        </Tooltip>
                        <Tooltip Text="Tooltip text" AlwaysActive="true">
                            <Button Color="Color.Primary">Always Active</Button>
                        </Tooltip>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is2">
                        <Field>
                            <Tooltip Text="Hello tooltip">
                                <TextEdit></TextEdit>
                            </Tooltip>
                        </Field>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Badge</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.
                </CardText>
            </CardBody>
            <CardBody>
                <Badge Color="Color.Primary">Primary</Badge>
                <Badge Color="Color.Secondary">Secondary</Badge>
                <Badge Color="Color.Success">Success</Badge>
                <Badge Color="Color.Danger">Danger</Badge>
                <Badge Color="Color.Warning">Warning</Badge>
                <Badge Color="Color.Info">Info</Badge>
                <Badge Color="Color.Light">Light</Badge>
                <Badge Color="Color.Dark">Dark</Badge>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Pill Badge</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Use the <code>Pill</code> modifier class to make badges more rounded.
                </CardText>
            </CardBody>
            <CardBody>
                <Badge Color="Color.Primary" Pill="true">Primary</Badge>
                <Badge Color="Color.Secondary" Pill="true">Secondary</Badge>
                <Badge Color="Color.Success" Pill="true">Success</Badge>
                <Badge Color="Color.Danger" Pill="true">Danger</Badge>
                <Badge Color="Color.Warning" Pill="true">Warning</Badge>
                <Badge Color="Color.Info" Pill="true">Info</Badge>
                <Badge Color="Color.Light" Pill="true">Light</Badge>
                <Badge Color="Color.Dark" Pill="true">Dark</Badge>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Pagination</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Provide pagination links for your site or app with the multi-page pagination component.
                </CardText>
            </CardBody>
            <CardBody>
                <Pagination>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">«</span>
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            1
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem Active="true">
                        <PaginationLink>
                            2
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            3
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            4
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            5
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">»</span>
                        </PaginationLink>
                    </PaginationItem>
                </Pagination>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Pagination Sizing</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Add <code>Size.Large</code> or <code>Size.Small</code> for additional sizes.
                </CardText>
            </CardBody>
            <CardBody>
                <Pagination Size="Size.Large">
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">«</span>
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            1
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            2
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            3
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem Active="true">
                        <PaginationLink>
                            4
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            5
                        </PaginationLink>
                    </PaginationItem>
                    <PaginationItem>
                        <PaginationLink>
                            <span aria-hidden="true">»</span>
                        </PaginationLink>
                    </PaginationItem>
                </Pagination>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Breadcrumbs</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Indicate the current page’s location within a navigational hierarchy.
                </CardText>
            </CardBody>
            <CardBody>
                <Breadcrumb>
                    <BreadcrumbItem Active="true">
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem Active="true">
                        <BreadcrumbLink To="#">Library</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
                <Breadcrumb>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Home</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem>
                        <BreadcrumbLink To="#">Library</BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbItem Active="true">
                        <BreadcrumbLink To="#">Data</BreadcrumbLink>
                    </BreadcrumbItem>
                </Breadcrumb>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Snackbar</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Snackbars provide brief messages about app processes at the bottom of the screen.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Clicked="@(()=>snackbar.Show())">Snackbar</Button>
                <Button Clicked="@(()=>snackbarAction.Show())">Snackbar With Action</Button>
                <Button Clicked="@(()=>snackbarMultiline.Show())">Multiline Snackbar</Button>
                <Button Clicked="@(()=>snackbarLeft.Show())">Left-Aligned Snackbar</Button>
                <Button Clicked="@(()=>snackbarRight.Show())">Right-Aligned Snackbar</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Colored Snackbar</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    You can also add additional color variants to snackbar.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarPrimary.Show())">Primary</Button>
                <Button Color="Color.Secondary" Clicked="@(()=>snackbarSecondary.Show())">Secondary</Button>
                <Button Color="Color.Success" Clicked="@(()=>snackbarSuccess.Show())">Success</Button>
                <Button Color="Color.Danger" Clicked="@(()=>snackbarDanger.Show())">Danger</Button>
                <Button Color="Color.Warning" Clicked="@(()=>snackbarWarning.Show())">Warning</Button>
                <Button Color="Color.Info" Clicked="@(()=>snackbarInfo.Show())">Info</Button>
                <Button Color="Color.Light" Clicked="@(()=>snackbarLight.Show())">Light</Button>
                <Button Color="Color.Dark" Clicked="@(()=>snackbarDark.Show())">Dark</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Stacked snackbars</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    You can have a dynamicaly stacked snackbars.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Success" Clicked="@(()=>snackbarStack.Push("Some success message!", SnackbarColor.Success, "Ok"))">Show Success message</Button>
                <Button Color="Color.Info" Clicked="@(()=>snackbarStack.Push("Some info message!", SnackbarColor.Info, "Ok"))">Show Info message</Button>
                <Button Color="Color.Warning" Clicked="@(()=>snackbarStack.Push("Some warning message!", SnackbarColor.Warning, "Ok"))">Show Warning message</Button>
                <Button Color="Color.Danger" Clicked="@(()=>snackbarStack.Push("Some danger message!", SnackbarColor.Danger, "Ok"))">Show Danger message</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is12.OnMobile">
        <Jumbotron Background="Background.Primary" Margin="Margin.Is4.FromBottom">
            <JumbotronTitle Size="JumbotronTitleSize.Is4">Hello, world!</JumbotronTitle>
            <JumbotronSubtitle>
                This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
            </JumbotronSubtitle>
            <Divider></Divider>
            <Paragraph>
                It uses utility classes for typography and spacing to space content out within the larger container.
            </Paragraph>
        </Jumbotron>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Alert</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Alerts are available for any length of text, as well as an optional dismiss button.</CardText>
            </CardBody>
            <CardBody>
                <Alert Color="Color.Success" Visible="true">
                    <AlertMessage>Well done!</AlertMessage>
                    <AlertDescription>You successfully read this important alert message.</AlertDescription>
                </Alert>
                <Alert Color="Color.Info" Visible="true">
                    <AlertMessage>Heads up!</AlertMessage>
                    <AlertDescription>
                        This alert needs your attention, but it's not super important.
                    </AlertDescription>
                </Alert>
                <Alert Color="Color.Warning" Visible="true">
                    <AlertMessage> Warning!</AlertMessage>
                    <AlertDescription>
                        Better check yourself, you're not looking too good.
                    </AlertDescription>
                </Alert>
                <Alert Color="Color.Danger" Visible="true">
                    <AlertMessage>Oh snap!</AlertMessage>
                    <AlertDescription>
                        Change a few things up and try submitting again.
                    </AlertDescription>
                </Alert>
                <Alert Color="Color.Success" Visible="true">
                    <Heading Size="HeadingSize.Is4" Color="TextColor.Success">Big one!</Heading>
                    <Paragraph>
                        <AlertMessage>Well done!</AlertMessage>
                        <AlertDescription>
                            You successfully read this important alert message.
                        </AlertDescription>
                    </Paragraph>
                    <Paragraph>
                        <Button Color="Color.Success">Wanna do this</Button>
                        <Button Color="Color.Light">Or do this</Button>
                    </Paragraph>
                </Alert>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Dismisable Alert</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Add a dismiss button and the which adds extra padding to the right of the alert and positions the <code>CloseButton</code>.
                </CardText>
            </CardBody>
            <CardBody>
                <Alert Color="Color.Success" Visible="@dismisableAlert1" Dismisable="true">
                    <AlertDescription>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </AlertDescription>
                    <AlertMessage>
                        Alert Link.
                    </AlertMessage>
                    <CloseButton Clicked="@(()=>dismisableAlert1 = false)" />
                </Alert>
                <Alert Color="Color.Info" Visible="@dismisableAlert2" Dismisable="true">
                    <AlertDescription>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </AlertDescription>
                    <AlertMessage>
                        Alert Link.
                    </AlertMessage>
                    <CloseButton Clicked="@(()=>dismisableAlert2 = false)" />
                </Alert>
                <Alert Color="Color.Warning" Visible="@dismisableAlert3" Dismisable="true">
                    <AlertDescription>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </AlertDescription>
                    <AlertMessage>
                        Alert Link.
                    </AlertMessage>
                    <CloseButton Clicked="@(()=>dismisableAlert3 = false)" />
                </Alert>
                <Alert Color="Color.Danger" Visible="@dismisableAlert4" Dismisable="true">
                    <AlertDescription>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </AlertDescription>
                    <AlertMessage>Alert Link.</AlertMessage>
                    <CloseButton Clicked="@(()=>dismisableAlert4 = false)" />
                </Alert>
                <Alert Color="Color.Info" Visible="@dismisableAlert5" Dismisable="true">
                    <Heading Size="HeadingSize.Is4" Color="TextColor.Success">
                        Big one!
                        <CloseButton Clicked="@(()=>dismisableAlert5 = false)" />
                    </Heading>
                    <Paragraph>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                    </Paragraph>
                    <Paragraph>
                        <Button Color="Color.Info">Wanna do this</Button>
                        <Button Color="Color.Light">Or do this</Button>
                    </Paragraph>
                </Alert>
            </CardBody>
        </Card>
    </Column>
</Row>
<Snackbar @ref="snackbar">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarAction">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarAction.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarMultiline" Multiline="true">
    <SnackbarBody>
        When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarMultiline.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarLeft" Location="SnackbarLocation.Left">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarRight" Location="SnackbarLocation.Right">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>

<Snackbar @ref="snackbarPrimary" Color="SnackbarColor.Primary">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarPrimary.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarSecondary" Color="SnackbarColor.Secondary">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarSecondary.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarSuccess" Color="SnackbarColor.Success">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarSuccess.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarDanger" Color="SnackbarColor.Danger">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarDanger.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarWarning" Color="SnackbarColor.Warning">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarWarning.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarInfo" Color="SnackbarColor.Info">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarInfo.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarLight" Color="SnackbarColor.Light">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarLight.Hide())">ACTION</SnackbarAction>
</Snackbar>
<Snackbar @ref="snackbarDark" Color="SnackbarColor.Dark">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
    <SnackbarAction Clicked="@(()=>snackbarDark.Hide())">ACTION</SnackbarAction>
</Snackbar>
<SnackbarStack @ref="snackbarStack" Location="SnackbarStackLocation.Right" />
@code{
    Snackbar snackbar;
    Snackbar snackbarAction;
    Snackbar snackbarMultiline;
    Snackbar snackbarLeft;
    Snackbar snackbarRight;

    Snackbar snackbarPrimary;
    Snackbar snackbarSecondary;
    Snackbar snackbarSuccess;
    Snackbar snackbarDanger;
    Snackbar snackbarWarning;
    Snackbar snackbarInfo;
    Snackbar snackbarLight;
    Snackbar snackbarDark;

    SnackbarStack snackbarStack;

    bool dismisableAlert1 = true;
    bool dismisableAlert2 = true;
    bool dismisableAlert3 = true;
    bool dismisableAlert4 = true;
    bool dismisableAlert5 = true;



}